<template>
  <view class="msg-card" @click.stop="toDetails">
    <view class="m-top">
      <image
        :src="item.member?.pic || avatarImg"
        style="width: 100rpx; height: 100rpx; border-radius: 100rpx"
      ></image>
      <view class="m-con">
        <view class="m-name">
          <text>{{ item.member?.name }} </text>
          <text v-if="item.user?.relation">({{ item.user.relation }})</text>
          <image
            :src="vipConfs[item.member?.title]"
            alt=""
            class="m-img"
            v-if="item.member.title"
          />
          <view style="margin-bottom: -4rpx">
            <custom-realname :realname="item.user.realname"></custom-realname>
          </view>
        </view>
        <text class="m-desc">{{ infoText }}</text>
      </view>
      <text class="m-text">{{ item.time }}</text>
    </view>

    <view class="m-bottom">
      <rich-text :nodes="infoMsg"></rich-text>
    </view>
  </view>
</template>

<script setup>
import vipIcon1 from "@/static/common/vip-jd.svg";
import vipIcon2 from "@/static/common/vip-nd.svg";
import vipIcon3 from "@/static/common/vip-yj.svg";
import vipIcon4 from "@/static/common/vip-zz.svg";
import avatarImg from "@/static/common/avatar.svg";

import { textColorFn } from "@/utils";
import useStore from "@/store";
const { person } = useStore();
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});

const vipConfs = shallowReactive({
  季度会员: vipIcon1,
  年度会员: vipIcon2,
  永久会员: vipIcon3,
  至尊会员: vipIcon4,
});

const infoText = computed(() => {
  const { gender, year, height, occupation } = props.item.user;
  const gObj = {
    女: "女儿",
    男: "儿子",
  };
  const list = [
    gObj[gender],
    year ? year + "年" : "",
    height ? "/身高" + height : "",
    occupation ? "/" + occupation : "",
  ];
  const str = list.join("");
  return str;
});

const infoMsg = computed(() => {
  const { msg } = props.item;
  return textColorFn(msg);
});

const toDetails = () => {
  const { user_id } = props.item;
  person.updatePersonId({ user_id });
  uni.navigateTo({ url: "/subPages/details/index" });
};
</script>

<style lang="scss" scoped>
.msg-card {
  .m-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
  }
  .m-con {
    flex: 1;
    padding-left: 15rpx;
  }
  .m-bottom {
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
    line-height: 80rpx;
    background: #f5f5f5;
    border-radius: 10rpx;
    padding: 0 20rpx;
    margin-bottom: 30rpx;
  }

  .m-name {
    font-size: 34rpx;
    color: #000;
    line-height: 1;
    display: flex;
    align-items: center;
  }
  .m-desc {
    font-size: 28rpx;
    color: #666;
  }
  .m-text {
    font-weight: 500;
    font-size: 24rpx;
    color: #999;
  }
  .m-img {
    width: 150rpx;
    height: 48rpx;
    margin-left: 6rpx;
  }

  .m-color {
    color: #ff5c55;
  }
}
</style>
